<template lang="pug">
    .classify
        ul
            li(v-for="(item,index) in list" :key="index" :class="{checkedLi:index===mark}" @click="mark=index") {{item.name}}
                ul.item(v-show="mark===index")
                    li(v-for="(cell,flag) in item.cell" :key="flag" :key2="index"  @click="showDetail(index,flag)")
                        img(:src="cell.url").item-img
        commodity-detail-show(:type="type" :num="num" :isDetail="isDetail" :number="number" @DetailClose="isDetail=false")
</template>

<script>
    import CommodityDetailShow from "./commodityDetailShow";

    export default {
        name: "classify",
        components: {CommodityDetailShow},
        data() {
            return {
                list: [
                    {
                        name: "休息零食",
                        P: "P1",
                        cell: [
                            {
                                name: "夏威夷果",
                                pay: 20,
                                url: require('../../public/img/home/commodity/fruit1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/fruit1.png')},
                                    {url: require("../../public/img/home/commodity/fruit2.png")},
                                    {url: require("../../public/img/home/commodity/fruit3.png")},
                                ],
                                introduce: "夏威夷果含有丰富的钙，磷 ，铁，维生素B1、B2和人体必需的8种氨基酸。"
                            },
                            {
                                name: "好吃的糖果",
                                pay: 40,
                                url: require('../../public/img/home/commodity/sweets1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/sweets1.png')},
                                    {url: require("../../public/img/home/commodity/sweets2.png")},
                                ],
                                introduce: "糖果是糖果糕点的一种，指以糖类为主要成份的一种小吃。"
                            }
                        ]
                    },
                    {
                        name: "精品服饰",
                        P: "P2",
                        cell: [
                            {
                                name: "卡通T恤",
                                pay: 120,
                                url: require('../../public/img/home/commodity/Tshirt1.png'),
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/Tshirt1.png')},
                                    {url: require("../../public/img/home/commodity/Tshirt2.png")},
                                ],
                                introduce: ""
                            },
                            {
                                name: "直男衬衫",
                                pay: 140,
                                url: require('../../public/img/home/commodity/shirt1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shirt1.png')},
                                    {url: require("../../public/img/home/commodity/shirt2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "手机数码",
                        P: "P3",
                        cell: [
                            {
                                name: "笔记本电脑",
                                pay: 5020,
                                url: require('../../public/img/home/commodity/computer1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/computer1.png')},
                                    {url: require("../../public/img/home/commodity/computer2.png")},
                                ],
                                introduce: "笔记本电脑是一种小型、可方便携带的个人电脑。"
                            },
                            {
                                name: "炫酷耳机",
                                pay: 1140,
                                url: require('../../public/img/home/commodity/headset1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/headset1.png')},
                                    {url: require("../../public/img/home/commodity/headset2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "户外运动",
                        P: "P4",
                        cell: [
                            {
                                name: "时尚运动鞋",
                                pay: 520,
                                url: require('../../public/img/home/commodity/shoe1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shoe1.png')},
                                    {url: require("../../public/img/home/commodity/shoe2.png")},
                                    {url: require("../../public/img/home/commodity/shoe3.png")}
                                ],
                                introduce: ""
                            },
                            {
                                name: "斯伯丁篮球",
                                pay: 240,
                                url: require('../../public/img/home/commodity/basketball1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/basketball1.png')},
                                    {url: require("../../public/img/home/commodity/basketball2.png")}
                                ],
                                introduce: "不易漏气变形，不易开胶起皮，篮球制作工艺复杂严格，球体坚固耐用。"
                            }
                        ]
                    },
                ],
                mark: 0,
                type: 0,
                num: 0,
                isDetail: false,
                postList: [0, 0, 0, 0, 0, 0, 0, 0],
                number: 0
            }
        },
        mounted() {
            if (sessionStorage.getItem('change') != null) {
                this.postList = sessionStorage.getItem('change').split(',');
            }
        },
        methods: {
            showDetail(index, flag) {
                this.type = index;
                this.num = flag;
                this.isDetail = true;
                if (flag < 1) {
                    index *= 2;
                } else {
                    index *= 2;
                    index += 1;
                }
                this.number = this.postList[index];
                console.log('告诉detail最新数量:' + this.number)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .classify
        height 100%
        display flex
        justify-content flex-start
        ul
            display inline-block
            margin 0
            padding 0
            list-style-type none
            width 30%
            height 100%
            border-right: 0.026rem solid #ddd
            li
                color: black
                height: 1.4rem
                line-height 1.4rem
                font-size 0.38rem
                border-bottom 0.026rem solid #ddd
                ul
                    position absolute
                    width 70%
                    right 0
                    top 0
                    li
                        border-bottom 0.026rem solid #ddd
                        img
                            width: 1.3rem
                            height: 1.3rem
            .checkedLi
                color red
</style>
